<template>
  <div class="dafen">
    <el-dialog
      center
      title=""
      :visible.sync="dialogTableVisible"
      width="600px">
      <row class="title">
        <img src="../../assets/khImg/pimngfen.png" alt="" >
        {{gsname}}-{{lxname}}
      </row>

      <el-radio-group v-model="value" @change="getValue()"  style="margin-top: 20px;">
        <el-radio-button v-for="(item,i) in items" :key="i" :label="i" >{{item.content}}</el-radio-button>
      </el-radio-group>

      <span slot="footer" class="dialog-footer">
        <el-button  size="small" @click="cancel" >返回</el-button>
        <el-button type="primary"  size="small" @click="determine"  style="margin-left: 47px">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    props: ['jihuaData'],
    name: "Role",
    data() {
      return {
        gsname:'',
        lxname:'',
        level:0,
        queryParams:{

        },
        dialogTableVisible:true,
        value:'',
        dianxb:0,
        liexb:0,
        items:[]
      };
    },
    components:{

    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      console.log('接受',this.jihuaData)
      this.gsname =this.jihuaData.gsname
      this.lxname =this.jihuaData.lxname
      this.level =this.jihuaData.level

      this.value =this.jihuaData.value
      this.liexb =this.jihuaData.liexb
      this.dianxb =this.jihuaData.dianxb

      var arr=[]
      for (var i=0;i<this.level+1;i++){
        arr.push({
          id:i,
          content:i
        })
      }
      this.items = arr
    },
    methods: {
      getValue(){
        console.log(this.radio)
      },
      //确定
      determine:function(){

        console.log(this.value)
        var obj={}
        obj.value = this.value
        obj.dianxb = this.dianxb
        obj.liexb = this.liexb
        this.$emit('callback',obj)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        // this.determine()
        this.$emit('callback','')//将submitModel的值传给父组件
      },

    }
  };
</script>
<style lang="scss">
  .dafen {
    .title {
      text-align: center;
      width: 100%;
      display: inline-block;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 19px;
      letter-spacing: 0px;
      color: #000000;
      img {
        width: 21px;
        height: 21px;
        margin-right: 11px;
        vertical-align:middle;
      }
    }
    .el-radio-button, .el-radio-button--medium, .el-radio-button__inner {
      margin-right: 20px;
      background-color: #f3f7ff;
      margin-bottom: 20px;
      width: 49px;
      height: 36px;
      border: none;
    }
    .el-dialog__body {
      padding: 0px 20px;
    }
    .el-radio-button:first-child .el-radio-button__inner {
      width: 49px;
      height: 36px;
      border: none;
    }
    .dialog-footer{
      .el-button {
        width: 63px;

        border-radius: 7px;
        border: solid 1px #1b95d3;
      }
    }

  }
  @media screen and (max-width:800px){
    .dafen {
      .title {
        text-align: center;
        width: 100%;
        display: inline-block;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1em;
        letter-spacing: 0px;
        color: #000000;
        img {
          width: 13px;
          height: 13px;
          margin-right: 0px;
          vertical-align: middle;
        }
      }
      .el-radio-button, .el-radio-button--medium, .el-radio-button__inner {
        margin-right: 20px;
        background-color: #f3f7ff;
        margin-bottom: 20px;
        width: 49px;
        height: 36px;
        border: none;
      }
      .el-dialog__body {
        padding: 0px 20px;
      }
      .el-radio-button:first-child .el-radio-button__inner {
        width: 49px;
        height: 36px;
        border: none;
      }
      .dialog-footer{
        .el-button {
          width: 63px;

          border-radius: 7px;
          border: solid 1px #1b95d3;
        }
      }

    }
  }

</style>
